<template>
  <div class="custom-form">
    <el-row :gutter="15">
      <el-form ref="elForm" v-loading="loading" :model="formData" :rules="rules" size="medium" label-width="100px"
        :key="showFormKey">
        <!-- 日常报销(办公交通通讯劳务服务) -->
        <el-col :span="24">
          <el-form-item label-width="0" prop="field1014526">
            <h2 align='center' style="color:undefined;font-size: nullpx;text-align: center">日常报销(办公交通通讯劳务服务)</h2>
          </el-form-item>
        </el-col>
        <!-- 部门名称 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('部门名称')" prop="F_DepartmentName" >
            <el-input v-model="formData['F_DepartmentName']" placeholder="请输入部门名称"
              :disabled="hasDisabledPermission('F_DepartmentName',false)"
              :readonly="!hasEditPermission('F_DepartmentName',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
         <!-- 申请人ID -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('申请人ID')" prop="F_UserId">
            <el-input v-model="formData['F_UserId']" placeholder="请输入申请人ID"
              :disabled="hasDisabledPermission('F_UserId',false)"
              :readonly="!hasEditPermission('F_UserId',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 角色ID -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('角色ID')" prop="F_RoleId">
            <el-input v-model="formData['F_RoleId']" placeholder="请选择角色ID"
              :disabled="hasDisabledPermission('F_RoleId',false)"
              :readonly="!hasEditPermission('F_RoleId',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 角色名称 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('角色名称')" prop="F_RoleName">
            <el-input v-model="formData['F_RoleName']" placeholder="请输入角色名称"
              :disabled="hasDisabledPermission('F_RoleName',false)"
              :readonly="!hasEditPermission('F_RoleName',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 职级名称 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('职级名称')" prop="F_Job">
            <el-input v-model="formData['F_Job']" placeholder="请输入职级名称"
              :disabled="hasDisabledPermission('F_Job',false)"
              :readonly="!hasEditPermission('F_Job',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 地区 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('地区')" prop="F_Area">
            <el-input v-model="formData['F_Area']" placeholder="请输入地区"
              :disabled="hasDisabledPermission('F_Area',false)"
              :readonly="!hasEditPermission('F_Area',false)" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 申请时间 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('申请时间')" prop="F_ApplyTime">
            <el-input v-model="formData['F_ApplyTime']" placeholder="请输入地区"
              :disabled="hasDisabledPermission('F_ApplyTime',false)"
              :readonly="!hasEditPermission('F_ApplyTime',false)" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 收款人部门名称 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('收款人部门名称')" prop="F_CollectionDeptName">
            <el-input v-model="formData['F_CollectionDeptName']" placeholder="请输入收款人部门ID"
              :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 联系人ID -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('联系人ID')" prop="F_ContactUserId">
            <el-input v-model="formData['F_ContactUserId']" placeholder="请输入联系人"
              :disabled="hasDisabledPermission('F_ContactUserId',false)"
              :readonly="!hasEditPermission('F_ContactUserId',false)" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 是否生效 -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('是否生效')" prop="F_IsEffective">
            <el-input v-model="formData['F_IsEffective']" placeholder="请输入是否生效"
              :disabled="hasDisabledPermission('F_IsEffective',false)"
              :readonly="!hasEditPermission('F_IsEffective',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 部门名称 -->
        <el-col :span="24" >
          <el-form-item :label="$t('部门名称')" prop="F_Department">
            <el-select
              v-model="formData['F_Department']"
              placeholder="请选择部门名称"
              :style="{ width: '100%' }"
              @change="Handleselect"
            >
              <el-option
                v-for="(item, index) in departmentData"
                :key="index"
                :label="item.F_FullName"
                :value="item.F_DepartmentId"
              ></el-option>
            </el-select>

          </el-form-item>
        </el-col>
        <!-- 申请人名称 -->
        <el-col :span="24">
          <el-form-item :label="$t('申请人姓名')" prop="F_UserName">
            <el-input v-model="formData['F_UserName']" placeholder="请输入申请人名称"
              :disabled="hasDisabledPermission('F_UserName',false)"
              :readonly="true" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 适用范围 -->
        <el-col :span="24" >
          <el-form-item :label="$t('适用范围')" prop="F_apply_range">
            <el-select v-model="formData['F_apply_range']" placeholder="请选择适用范围"
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in applyRange_typeOptions" :key="index" :label="item.F_ItemName"
                :value="item.F_ItemValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 支付公司选择 -->
        <el-col :span="24" >
          <el-form-item :label="$t('支付公司')" prop="F_payment_company">
            <el-select v-model="formData['F_payment_company']" placeholder="请选择支付公司"
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in paymentCompany_typeOptions" :key="index" :label="item.F_ItemName"
                :value="item.F_ItemValue"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 收款人ID -->
        <el-col :span="24" v-show="showFlag">
          <el-form-item :label="$t('收款人ID')" prop="F_CollectionUserId">
              <el-input v-model="formData['F_CollectionUserId']" placeholder="请选择收款人ID"
              :disabled="hasDisabledPermission('F_CollectionUserId',false)"
              :readonly="!hasEditPermission('F_CollectionUserId',false)" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 收款人姓名 -->
        <el-col :span="24" >
          <el-form-item :label="$t('收款人姓名')" prop="F_CollectionUserName">
            <el-input v-model="formData['F_CollectionUserName']" placeholder="请选择收款人姓名"
              :disabled="hasDisabledPermission('F_CollectionUserName',false)"
              :readonly="!hasEditPermission('F_CollectionUserName',false)" clearable
              @focus="selectPeople(1)"
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 收款人部门名称 -->
        <el-col :span="24">
          <el-form-item :label="$t('收款人部门')" prop="F_CollectionDeptId">
            <el-select
              v-model="formData['F_CollectionDeptId']"
              placeholder="请选择收款人部门名称"
              :style="{ width: '100%' }"
              @change="Handleselect1"
            >
              <el-option
                v-for="(item, index) in department"
                :key="index"
                :label="item.F_FullName"
                :value="item.F_DepartmentId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 收款账号 -->
        <el-col :span="24">
          <el-form-item :label="$t('收款账号')" prop="F_CollectionAccount">
            <el-input v-model="formData['F_CollectionAccount']" placeholder="请输入收款账号"
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 报销类型 -->
        <el-col :span="24" >
          <el-form-item :label="$t('报销类型')" prop="F_ExpenseType">
            <el-select v-model="formData['F_ExpenseType']" placeholder="请选择报销类型"
              :disabled="hasDisabledPermission('F_ExpenseType',false)" filterable clearable
              @change="selectType"
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in expense_typeOptions" :key="index" :label="item.F_ItemName"
                :value="item.F_ItemValue" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 报销发生时间 -->
        <el-col :span="24" >
          <el-form-item :label="$t('报销发生时间')" prop="F_ExpenseTime">
            <el-date-picker :disabled="hasDisabledPermission('F_ExpenseTime',false)"
              :readonly="!hasEditPermission('F_ExpenseTime',false)" v-model="formData['F_ExpenseTime']"
              format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{width: '100%'}" placeholder="请选择报销发生时间"
              clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 发票号 -->
        <el-col :span="24" >
          <el-form-item :label="$t('发票票号')" prop="F_InvoiceNumber" v-show="showFlag">
            <el-input v-model="formData['F_InvoiceNumber']" placeholder="请填写发票号"
              :disabled="hasDisabledPermission('F_InvoiceNumber',false)"
              :readonly="!hasEditPermission('F_InvoiceNumber',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 联系人姓名 -->
        <el-col :span="24">
          <el-form-item :label="$t('联系人姓名')" prop="F_ContactUserName">
              <el-input v-model="formData['F_ContactUserName']" placeholder="请选择联系人姓名"
                :disabled="hasDisabledPermission('F_ContactUserName',false)"
                :readonly="!hasEditPermission('F_ContactUserName',false)" clearable
                @focus="selectPeople(2)"
                :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 关联审批单 -->
        <el-col :span="24" >
          <el-form-item :label="$t('关联审批单')" prop="F_ContractTravelProcessId">
            <el-input v-model="formData['F_ContractTravelProcessId']" placeholder="请选择"
              :disabled="hasDisabledPermission('F_ContractTravelProcessId',false)"
              @focus="handleSetProject"
              :readonly="!hasEditPermission('F_ContractTravelProcessId',false)" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 关联立项申请 -->
        <el-col :span="24" v-show="selectData.length > 0">
          <el-form-item label="">
            <div class="del_items" v-for="(item,index) in selectData" :key="index">
              <div class="del-items-left"><img src="../../../assets/card/file.png"></div>
              <div class="del-items-middle">{{item.startUser}}提交的{{item.schemeName}}</div>
              <div class="del-items-refuse" v-if="item.status==0">审批拒绝</div>
              <div class="del-items-adopt" v-else-if="item.status==1">审批通过</div>
              <div class="del-items-processing" v-else>审批中</div>
              <div class="del-items-close" @click="delApproval(item,index)"><img src="../../../assets/card/close.png"></div>
            </div>
          </el-form-item>
        </el-col>
        <!-- 费用说明 -->
        <el-col :span="24" v-show="otherFlag">
          <el-form-item :label="$t('费用说明')" prop="F_Remark">
            <el-input v-model="formData['F_Remark']" type="textarea" placeholder="请填写费用说明"
              :disabled="hasDisabledPermission('F_Remark',false)"
              :readonly="!hasEditPermission('F_Remark',false)" :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 汽车牌照选择 -->
        <el-col :span="24" v-show="carNumberFlag">
          <el-form-item :label="$t('汽车牌照')">
            <el-select v-model="formData['F_Car_Number']" placeholder="请选择汽车牌照"
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in carNumberData" :key="index" :label="item.F_ItemName"
                :value="item.F_ItemValue" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 上传附件 -->
        <el-col :span="24">
          <el-form-item :label="$t('上传附件')" prop="F_Attachment">
              <el-upload action="" multiple ref="fileupload" class="upload-demo"
                  :on-change="fileChange"
                  :on-remove="upLoadRemove"
                  :http-request="uploadFile1">
                <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                <el-tooltip class="item" effect="dark" :content="contents" placement="top">
                  <el-button style="margin-left: 10px;" size="small" @click="uploadFileAxios">
                    开始识别<i class="el-icon-question el-icon--right"></i>
                  </el-button>
                </el-tooltip>
                <div slot="tip" class="el-upload__tip">只能上传图片或pdf，最多不能超过10张，总大小不超过20M</div>
              </el-upload>
          </el-form-item> 
        </el-col>
        <!-- 发票详情 -->
        <el-col :span="24" >
          <el-form-item :slot="label">
            <el-tooltip class="item marginleft" effect="dark" :content="contents1" placement="top">
              <label> <i class="el-icon-question"></i>智能识别发票内容</label>
            </el-tooltip>
            <div class="table-box">
                <div class="table-header">
                    <div class="table-header-items width100">序号</div>
                    <div class="table-header-items width200" title="是否需要验真"><span class="required">*</span>是否需要验真</div>
                    <div class="table-header-items width200" title="验真结果"><span class="required">*</span>验真结果</div>
                    <div class="table-header-items width200" title="是否重复"><span class="required">*</span>是否重复</div>
                    <div class="table-header-items width200" title="发票代码"><span class="required">*</span>发票代码</div>
                    <div class="table-header-items width200" title="发票号码"><span class="required">*</span>发票号码</div>
                    <div class="table-header-items width200" title="开票日期"><span class="required">*</span>开票日期</div>
                    <div class="table-header-items width200" title="发票校验码"><span class="required">*</span>发票校验码</div>
                    <div class="table-header-items width200" title="发票金额（元）"><span class="required">*</span>发票金额（元）</div>
                    <div class="table-header-items width100">操作</div>
                </div>
                <div class="table-body" v-for="(item,index) in formData.invoiceDetails" :key="index">
                    <div class="table-header-items width100">{{index+1}}</div>
                    <!-- 是否需要验真 -->
                    <div class="table-header-items width200">
                      <div class="textaligncenter needs" v-if="item.need_check == '1'">需要</div>
                      <div class="textaligncenter no-needs" v-else-if="item.need_check =='2'">不需要</div>
                      <div class="textaligncenter" v-else></div>
                    </div>
                    <!-- 验真结果 -->
                    <div class="table-header-items width200" v-if="item.need_check == 1">
                      <div class=" flex_1" v-if="item.check_pass=='1'">
                        <div class="left1">验证通过</div>
                        <div class="right1"><img src="../../../assets/flowlist/effective.png"></div>
                      </div>
                      <div class="flex_1" v-else-if="item.check_pass=='2'">
                        <div class="left1">验证不通过</div>
                        <div class="right1"><img src="../../../assets/flowlist/invalid.png"></div>
                      </div>
                      <div class="flex_1" v-else>
                        <div class="left1"></div>
                        <div class="right1"></div>
                      </div>
                    </div>
                    <div class="table-header-items width200" v-else-if="item.need_check == 2">--</div>
                    <div class="table-header-items width200" v-else></div>
                    <!-- 是否重复（系统内） -->
                    <div class="table-header-items width200">
                      <div class=" flex_1" v-if="item.used=='1'">
                        <div class="left1">重复</div>
                        <div class="right1"><img src="../../../assets/flowlist/repeat.png"></div>
                      </div>
                      <div class="flex_1" v-else-if="item.used=='0'">
                        <div class="left1">不重复</div>
                        <div class="right1"><img src="../../../assets/flowlist/no-repeat.png"></div>
                      </div>
                      <div class="flex_1" v-else>
                        <div class="left1"></div>
                        <div class="right1"></div>
                      </div>
                    </div>
                    <div class="table-header-items width200"><el-input class="el-inputs_" placeholder="请输入" v-model="item.invoice_code"></el-input></div>
                    <div class="table-header-items width200"><el-input class="el-inputs_" placeholder="请输入" v-model="item.invoice_num"></el-input></div>
                    <div class="table-header-items width200"><el-input class="el-inputs_" placeholder="请输入" v-model="item.invoice_date"></el-input></div>
                    <div class="table-header-items width200"><el-input class="el-inputs_" placeholder="请输入" v-model="item.check_code"></el-input></div>
                    <div class="table-header-items width200"><el-input class="el-inputs_" placeholder="请输入" v-model="item.total_amount"></el-input></div>
                    <div class="table-header-items width100">
                        <el-link type="danger" @click="delInvoice(index)">删除</el-link>
                    </div>
                </div>
            </div>
          </el-form-item>
        </el-col>
        <!-- 报销金额 -->
        <el-col :span="24">
          <el-form-item :label="$t('报销金额')" prop="F_ExpenseAmount">
            <el-input v-model.number="formData['F_ExpenseAmount']" type="number" placeholder="请输入报销金额"
              :disabled="hasDisabledPermission('F_ExpenseAmount',false)"
              :readonly="!hasEditPermission('F_ExpenseAmount',false)" clearable :style="{width: '100%'}">
              <template slot="prepend">¥</template>
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 报销事由 -->
        <el-col :span="24">
          <el-form-item :label="$t('报销事由')" prop="F_ExpenseReason">
            <el-input v-model="formData['F_ExpenseReason']" 
              type="textarea" 
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入报销事由"
              :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- 意见簿 -->
        <el-col :span="24" v-show="optionsFlag">
          <el-form-item :label="$t('意见簿')" prop="field126a83f">
            <xjr-opinion-comonent :value="formData.field126a83f"></xjr-opinion-comonent>
          </el-form-item>
        </el-col>
        <!-- 提交按钮 -->
        <el-col :span="24" v-if="!isWorkflowForm">
          <el-form-item size="large" v-if="isEdit">
            <el-button type="primary" @click="submitForm" :loading="submitLoading">
              {{submitLoading?$t('workFlow.WFMenu.hintSubmit'):$t('submit')}}</el-button>
            <el-button @click="cancelForm">{{$t('cancelText')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <!-- 人员选择 -->
    <el-dialog
        width="70%"
        title="人员列表"
        :visible.sync="selectNymberVisible"
        append-to-body>
        <SelectNumber ref="selectpeople"
        @staff="staff"/>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" @click="determine">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 关联审批单（备用金申请、出差） -->
    <el-dialog
      title="选择出差"
      :visible.sync="setPeojectDialogVisible"
      width="800px"
      append-to-body
      :before-close="handleClose">
        <DailyApproval ref="approval" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="setPeojectDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sure">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
  import FilterableDataList from '@/components/generator/clientComponents/FilterableDataList.vue';
  import workflowFormAuthorize from "@/mixins/workflowFormAuthorize";
  import authorizeMixin from "@/mixins/authorize";
  import DailyApproval from '../components/dailyapproval.vue'
  import { baseUrl } from "@/config/env";
  import request from "@/router/axios";
  import { v4 as uuidv4 } from "uuid";
  import {distInvoice}from '@/api/user.js';
  import SelectNumber from '@/components/organizationalStructure/selectNumber.vue'
  import {getUserDetailsById,getCUrrentDepartmentUserList} from '@/api/user.js';
  export default {
    mixins: [authorizeMixin,workflowFormAuthorize],
    components: {SelectNumber,DailyApproval},
    props: ['keyValue', 'isEdit', 'disabled'],
    data() {
      let _this = this
      return {
        dataVal:{},
        otherFlag:false,
        carNumberFlag:false,
        submitLoading: false,
        showForm: true,
        showFormKey: 1,
        reRenderSubform: false,
        operationVal: 'add',
        isAdd: true,
        addressUrl:'dailyexpense',
        mainTableName: 'oa_exp_daily',
        formConfig: {},
        formData: {
          'F_Job': '',//职级名称
          'F_UserId': '',//申请人id
          'F_UserName': '',//申请人姓名
          'F_apply_range':'',//适用范围(2000平研究院、歌华职能、重庆工厂、其他)
          'F_payment_company':'',//支付公司选择(重庆太蓝、太蓝北分、太蓝嘉兴)
          'F_ApplyTime': null,//申请时间
          'F_Department': '',//部门id
          'F_DepartmentName': '',//部门名称
          'F_RoleId': '',//角色id
          'F_RoleName': '',//角色名称
          'F_ExpenseType': '',//报销类型
          'F_ExpenseAmount': "",//报销金额
          'F_ExpenseReason':'',//报销事由
          'F_ExpenseTime': null,//报销发生时间
          'F_Area': '',//地区
          'F_Car_Number':'',//汽车牌照选择
          'F_InvoiceNumber': '123',//发票号
          'F_CollectionUserId': '',//收款人id
          'F_CollectionUserName': '',//收款人姓名
          'F_CollectionDeptName':'', //收款人部门名称
          'F_CollectionDeptId':'',//收款人部门ID
          'F_CollectionAccount':'',// 收款账号
          'F_ContactUserId':'',//联系人id
          'F_ContactUserName':'',//联系人姓名
          'F_IsEffective': '0',//是否生效
          'field126a83f': null,
          'F_ContractTravelProcessId': '',//关联审批单
          'F_Remark': '',//备注
          'F_Attachment': null,//附件
          invoiceDetails:[
            {
              invoice_code:'',//发票代码
              invoice_num:'',//发票号码
              invoice_date:'',//开票日期
              invoice_des:'',//发票类型
              check_code:'',//发票校验码
              total_amount:'',//发票金额
              check_pass:'0',//验证是否通过
              check_result:'',//验证结果
              need_check:'',//是否需要验证
              used:'2',//验重
            }
          ]
        },
        rules: {
          F_Job: [{
            required: true,
            message: '请输入职级名称',
            trigger: 'blur'
          }],
          F_ContactUserName:[{
            required: true,
            message: '请选择联系人',
            trigger: 'change'
          }],
          F_UserId: [{
            required: true,
            message: '请输入申请人ID',
            trigger: 'blur'
          }],
          F_CollectionAccount:[{
            required: true,
            message: '请输入收款账号',
            trigger: 'blur'
          }],
          F_UserName: [{
            required: true,
            message: '请输入申请人名称',
            trigger: 'blur'
          }],
          F_ApplyTime: [{
            required: true,
            message: '请选择申请时间',
            trigger: 'blue'
          }],
          F_Department: [{
            required: true,
            message: '系统默认(公司)部门ID',
            trigger: 'change'
          }],
          F_DepartmentName: [{
            required: true,
            message: '请输入部门名称',
            trigger: 'blur'
          }],
          F_apply_range:[{
            required: true,
            message: '请选择使用范围',
            trigger: 'blur'
          }],
          F_payment_company:[{
            required: true,
            message: '请选择支付公司',
            trigger: 'blur'
          }],
          F_RoleId: [{
            required: true,
            message: '请选择角色ID',
            trigger: 'change'
          }],
          F_RoleName: [{
            required: true,
            message: '请输入角色名称',
            trigger: 'blur'
          }],
          F_ExpenseType: [{
            required: true,
            message: '请选择报销类型',
            trigger: 'change'
          }],
          F_ExpenseAmount: [{
            required: true,
            message: '请输入报销金额',
            trigger: 'blur'
          }],
          F_ExpenseReason:[{
            required: true,
            message: '请输入报销事由',
            trigger: 'blur'
          }],
          F_ExpenseTime: [{
            required: true,
            message: '请选择报销发生时间',
            trigger: 'change'
          }],
          F_Area: [{
            required: true,
            message: '请输入地区',
            trigger: 'blur'
          }],
          F_InvoiceNumber: [{
            required: true,
            message: '请输入发票票号',
            trigger: 'blur'
          }],
          F_CollectionUserId: [],
          F_IsEffective: [],
          F_CollectionUserName: [{
            required: true,
            message: '请输入联系人',
            trigger: 'change'
          }],
          F_ContractTravelProcessId: [{
            required: false,
            message: '请选择关联审批单',
            trigger: 'change'
          }],
          F_Remark: [{
            required: false,
            message: '请输入费用说明',
            trigger: 'blur'
          }],
          F_Attachment: [{
            required: false,
            message: '上传附件不能为空',
            trigger: 'change'
          }],
        },
        dept_idOptions: undefined,
        applyRange_typeOptions:[],
        paymentCompany_typeOptions:[],
        expense_typeOptions: [],
        carNumberData:[],
        collection_user_idOptions: undefined,
        contact_user_idOptions: undefined,
        departmentData:[],//部门信息
        fileList:[],
        selectData:[],
        roleData:[],//角色信息
        //选择人员列表
        selectUserVisible:false,
        userListData:[],
        filterData:[],
        department:[],
        selectNymberVisible:false,
        values:0,
        setPeojectDialogVisible:false,
        loading:false,
        contents:'点击开始识别，系统将自动进行发票识别，并将识别的结果统计到发票内容的表格中',
        contents1:'由于文件清晰度不同，可能会存在部分发票无法识别的情况，该识别结果仅供参考',
        showFlag:false
      }
    },
    computed: {},
    watch: {
      'formData.F_ExpenseAmount': function(val, oldVal) {
        this.changeFormConfigDefaultValue();
      },
    },
    created() {
      this.formConfig = this.getFormConfig();
    },
    async mounted() {
      //TODO再这里做数据回填 请求表单数据
      if(this.keyValue){
          this.isAdd = false;
      }
      if(!this.isAdd && this.keyValue){
        this.operationVal = 'edit';
        try {
          let res = await request({
            url: baseUrl + "/"+this.addressUrl+"/" + this.keyValue,
            method: "get",
          });
          this.formData = res.data.data
          this.showFormKey++;
        } catch (error) {
        }
      }
      if (typeof this.getDept_idOptions == "function") {
        await this.getDept_idOptions();
      }
      //获取适用范围字典数据
      if (typeof this.getApplyRange_idOptions == "function") {
        await this.getApplyRange_idOptions();
      }
      //获取支付公司字典数据
      if (typeof this.getPaymentCompany_idOptions == "function") {
        await this.getPaymentCompany_idOptions();
      }
      if (typeof this.getExpense_typeOptions == "function") {
        await this.getExpense_typeOptions();
      }
      if (typeof this.getExpense_carNumberData == "function") {
        await this.getExpense_carNumberData();
      }
      
      await this.getCurrentInfo()
      await this.initFCollectionDeptId()
    },
    methods: {
      selectType(){
        if(this.formData['F_ExpenseType'] == 17){
          this.otherFlag = true
        }else{
          this.otherFlag = false
        }
        if(this.formData['F_ExpenseType'] == 18){
          this.carNumberFlag = true
        }else{
          this.carNumberFlag = false
        }
      },
      uploadFileAxios(){
        this.loading = true
        let _this = this
        this.folderId = uuidv4()
        var form = new FormData();//new一个表单对象
        if(this.fileList && this.fileList.length > 0){
          this.fileList.forEach(e =>{
            form.append("file",e)
          })
          axios({
            method: 'post',
            url:`${baseUrl}/upload/oss/${_this.folderId}/batch`,
            headers: {'Content-Type': 'multipart/form-data'},
            data:form
          }).then(res => {
            if(res.data && res.data.success){
              this.analysis(res.data.data)
            }
          })
        }else{
          this.loading = false
          this.$message.warning("请先上传发票")
        }
      },
      analysis(files){
        let data = []
        let result
        if(files && files.length > 0){
          files.forEach(e=>{
            data.push(e.fileId)
          })
        }
        distInvoice(data).then(res => {
          if(res.data && res.data.success){
            this.loading = false
            if(res.data.data){
              this.formData['F_ExpenseAmount'] = res.data.data.total_amount
              this.formData.invoiceDetails = res.data.data.list
            }
          }else{
            this.loading = false
          }
        })
      },
      upLoadRemove(file) {
        let tempFileList = [];
        for (var index = 0; index < this.fileList.length; index++) {
          if (this.fileList[index].name !== file.name) {
            tempFileList.push(this.fileList[index]);
          }
        }
        this.fileList = tempFileList;
      },
      uploadFile1(){},
      fileChange(){
        //判断上传文件数量
        this.length = document.querySelector("input[type=file]").files.length;
        if(this.length > 0){
          Array.from(document.querySelector("input[type=file]").files).forEach(file=>{
            if(this.fileList.indexOf(file) == -1){
              this.fileList.push(file);
            }
          })
        }
        return false;
      },
      handleBeforeUpload(file) {
        const uploadLimit = 3
        const uploadTypes = ['jpg', 'png', 'jpeg', 'pdf']
        const filetype = file.name.replace(/.+\./, '')
        const isRightSize = (file.size || 0) / 1024 / 1024 < uploadLimit
        if (!isRightSize) {
            this.$message.error('文件大小超过 ' + uploadLimit + 'MB')
            return false
        }
        if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
            this.$message.warning({
                message: '仅支持上传图片和PDF'
            })
            return false
        }
        this.fileList.push(file)
      return true
      },
      handleSetProject(){
        this.setPeojectDialogVisible = true
        this.$nextTick(()=>{
          this.$refs.approval.init()
        })
      },
      delApproval(item,index){
        if(this.$refs.approval.historyTaskData.includes(item)){
          this.$refs.approval.historyTaskData.forEach((e,i) => {
            if(e == item){
              this.$refs.approval.historyTaskData.splice(i,1)
            }
          })
        }
        if(this.$refs.approval.myTaskData.includes(item)){
          this.$refs.approval.myTaskData.forEach((e,i) => {
            if(e == item){
              this.$refs.approval.myTaskData.splice(i,1)
            }
          })
        }
        if(this.$refs.approval.manualTaskData.includes(item)){
          this.$refs.approval.manualTaskData.forEach((e,i) => {
            if(e == item){
              this.$refs.approval.manualTaskData.splice(i,1)
            }
          })
        }
        this.sure('del')
      },
      sure(v){
        if(v=='del'){
          this.formData['F_ContractTravelProcessId'] = ''
        }
        this.$refs.approval.historyTaskData = this.$refs.approval.historyTaskData.filter(e => e.isChecked)
        this.$refs.approval.myTaskData = this.$refs.approval.myTaskData.filter(e => e.isChecked)
        this.$refs.approval.manualTaskData = this.$refs.approval.manualTaskData.filter(e => e.isChecked)
        if(this.$refs.approval.historyTaskData && this.$refs.approval.historyTaskData.length > 0){
          this.$refs.approval.historyTaskData.forEach(element => {
            this.formData['F_ContractTravelProcessId'] += element.processInstanceId + ','
          })
        }
        if(this.$refs.approval.myTaskData && this.$refs.approval.myTaskData.length > 0){
          this.$refs.approval.myTaskData.forEach(element => {
            this.formData['F_ContractTravelProcessId'] += element.processInstanceId + ','
          })
        }
        if(this.$refs.approval.manualTaskData && this.$refs.approval.manualTaskData.length > 0){
          this.$refs.approval.manualTaskData.forEach(element => {
            this.formData['F_ContractTravelProcessId'] += element.processInstanceId + ','
          })
        }
        this.selectData = [...this.$refs.approval.historyTaskData,...this.$refs.approval.myTaskData,...this.$refs.approval.manualTaskData]
        this.setPeojectDialogVisible = false
      },
      del(){
        this.formData['F_ContractTravelProcessId'] = ''
        this.dataVal = {}
      },
      determine(){
        if(this.values == 1){
          this.initFCollectionDeptId()
        }
        this.selectNymberVisible = false
      },
      staff(val){
        if(this.values == 1){
          this.formData['F_CollectionUserName'] = val.F_RealName
          this.formData['F_CollectionUserId'] = val.F_UserId
        }
        if(this.values == 2){
          this.formData['F_ContactUserName'] = val.F_RealName
          this.formData['F_ContactUserId'] = val.F_UserId
        }
      },
      getUserIds(v){
        console.log('v',v);
        this.formData.F_CollectionUserName = v
      },
      initFCollectionDeptId(){
        if(this.formData['F_CollectionUserId']){
          let params = {
            userId:this.formData['F_CollectionUserId']
          }
          getUserDetailsById(params).then(res => {
            if(res.data.success){
              this.department = res.data.data.F_Department
            }
          })
        }
      },
      getCurrentInfo(){
        let params
        if(this.formData.F_UserId){
          params = {
            userId:this.formData.F_UserId
          }
        }else{
          params = {
            userId:this.$store.state.user.userInfo.F_UserId
          }
        }
        getUserDetailsById(params).then(res => {
          this.formData['F_UserId'] = res.data.data.F_UserId//当前申请人id
          this.formData['F_UserName'] = res.data.data.F_RealName//当前申请人姓名
          this.formData['F_Area'] = res.data.data.F_Area//地区
          this.formData['F_Job'] = res.data.data.F_Job//职级
          this.departmentData = res.data.data.F_Department//部门信息
          this.roleData = res.data.data.F_Role//角色信息
          this.initRole()
          this.initDepartmentData()
        })
      },
      initDepartmentData(){
        if(this.departmentData && this.departmentData.length == 1){
          this.formData['F_DepartmentName'] = this.departmentData[0].F_FullName
          this.formData['F_Department'] = this.departmentData[0].F_DepartmentId
        }
      },
      getTime(){
        let today = new Date()
        let year = today.getFullYear();
        let month = today.getMonth() + 1;//获取月份，值为0-11 表示1-12月份
        if(month <= 9){
            month = "0"+month
        }
        let date = today.getDate();
        if(date <= 9){
            date = "0" + date
        }
        let hours = today.getHours();
        if(hours <= 9){
            hours = "0" + hours
        }
        let minutes = today.getMinutes()
        if(minutes <= 9){
            minutes = "0" + minutes
        }
        let seconds = today.getSeconds();
        if(seconds <= 9){
            seconds = "0" + seconds
        }
        let time = year +"-" + month +"-" + date +" "+ hours +":"+ minutes +":"+ seconds
        return time
      },
      initRole(){
        let roleId = []
        let roleName = []
        if(this.roleData && this.roleData.length > 0){
          this.roleData.forEach(e => {
            roleId.push(e.F_RoleId)
            roleName.push(e.F_FullName)
          })
        }
        this.formData['F_RoleId'] = roleId.join(',')
        this.formData['F_RoleName'] = roleName.join(',')
        this.formData['F_ApplyTime'] = this.getTime()
      },
      getFormData() {
        let key = this.mainTableName + 'Entity';
        let returnParams = {};
        returnParams[key] = this.formData;
        return {
          ...returnParams,
        };
      },
      validateForm() {
        this.$refs['elForm'].validate(valid => {});
      },
      async aysncValidateForm() {
        let validataArry = []
        validataArry.push(new Promise((resolve, reject) => {
          this.$refs['elForm'].validate(valid => {
            resolve(valid)
          })
        }))
        let res = await Promise.all(validataArry)
        if (res.includes(false)) {
          return false
        }
        else {
          return true;
        }
      },
      changeTableData() {},
      async submitForm() {
        this.submitLoading = true;
        let valid = await this.aysncValidateForm();
        if (valid == false) {
          this.submitLoading = false;
          return false;
        }
        this.changeTableData();
        //格式化数据
        let newObj = this.getFormData();
        
          //如果没有传入参数就是新增
          if (!this.keyValue) {

            request({
              url: baseUrl + "/"+this.addressUrl,
              method: "post",
              data : newObj
            }).then((res) => {
              this.submitLoading = false;
              this.$notify({
                title: "成功",
                message: "新增成功",
                type: "success",
              });
              this.$emit("onChange",true)
            });

          }
          else{

          request({
              url: baseUrl + "/"+this.addressUrl+"/" + this.keyValue,
              method: "put",
              data : newObj
            }).then((res) => {
              this.submitLoading = false;
              this.$notify({
                title: "成功",
                message: "修改成功",
                type: "success",
              });
              this.$emit("onChange",true)
            });

          }
        
        
        
      },
      cancelForm() {
        this.$emit("onChange", true)
      },
      formatTree(data, valueField, lableField, childField, type) {
        let tree = [];
        data.forEach((node, index) => {
          let newNode = {
            value: node[valueField],
            label: node[lableField],
          };
          if (type) {
            newNode.disabled = node[valueField] == undefined ? true : false
          }
          tree.push(newNode);
          if (node[childField] != null && node[childField].length > 0) {
            newNode.children = (this.formatTree(node[childField], valueField, lableField, childField,
            type));
          }
        }, this);
        return tree;
      },
      //辅助工作流 审批(编辑) 预留方法
      handleEdit() {
      },
      getNumberFixed2(number) {
        let splitNum = ("" + number).replace(/(^0*)/g, "").split(".");
        let num = splitNum[0] == "" ? '0' : splitNum[0];
        if (splitNum.length > 1) {
          num += '.';
          let roundNum = 2; //保留两位小数
          for (let i = 0; i < roundNum; i++) {
            num += splitNum[1][i];
          }
        }
        return parseFloat(num);
      },
      changeFormConfigDefaultValue() {
        let valueForFormIdMap = new Map();
        this.formConfig.fields.forEach((ele) => {
          if (ele.__config__.componentName == "table") {
            ele.__config__.children.forEach((element) => {
              valueForFormIdMap.set(ele.__config__.formId + "-table-" + element.__config__.formId,
                element.__config__.defaultValue);
            });
          }
          else if (ele.__config__.componentName && ele.__config__.componentName == 'avue-tabs') {
            let childrenObj = ele.__config__.childrenObj || {};
            let _arr = this.getValByTabs(childrenObj);
            _arr.map(item => {
              valueForFormIdMap.set(item.formId, item.defaultValue);
            });
          }
          else {
            valueForFormIdMap.set(ele.__config__.formId, this.formData[ele.__vModel__]);
          }
        });
        this.formConfig.fields.forEach((ele, index) => {
          if (ele.__config__.componentName == "table") {
            ele.__config__.children.forEach((element, childrenIndex) => {
              let defaultValue = 0;
              if (element.computationalConfiguration && element.computationalConfiguration.length > 0) {
                let formulaStr = "";
                element.computationalConfiguration.forEach((item) => {
                  if (item.type == "taxRate") {
                    //税率
                    if (element.taxRate >= 0) {
                      formulaStr += element.taxRate * 0.01;
                    }
                  }
                  else {
                    let eleValue = valueForFormIdMap.get(item.formId) || 0;
                    formulaStr += item.formId == 0 ? item.name : eleValue;
                  }
                });
                defaultValue = eval(formulaStr);
                defaultValue = this.getNumberFixed2(defaultValue);
                //大写
                if (element.isCapitalized) {
                  this.formConfig.fields[index].__config__.children[childrenIndex].__config__
                    .capitalizedValue = this.getCapitalizedMethod(defaultValue);
                }
                this.formConfig.fields[index].__config__.children[childrenIndex].__config__
                  .defaultValue = defaultValue;
                this.formData[element.__vModel__] = defaultValue;
              }
            });
          }
          else if (ele.__config__.componentName && ele.__config__.componentName == 'avue-tabs') {
            let childrenObj = ele.__config__.childrenObj || {};
            //avue-tabs
            this.calcDefaultValueByTabs(ele.__config__.childrenObj, valueForFormIdMap);
          }
          else {
            let defaultValue = 0;
            if (ele.computationalConfiguration && ele.computationalConfiguration.length > 0) {
              let formulaStr = "";
              ele.computationalConfiguration.forEach((item) => {
                if (item.type == "taxRate") {
                  //税率
                  if (ele.taxRate >= 0) {
                    formulaStr += ele.taxRate * 0.01;
                  }
                }
                else {
                  let eleValue = valueForFormIdMap.get(item.formId) || 0;
                  formulaStr += item.formId == 0 ? item.name : eleValue;
                }
              });
              defaultValue = eval(formulaStr);
              defaultValue = this.getNumberFixed2(defaultValue);
              //大写
              if (ele.isCapitalized) {
                this.formConfig.fields[index].__config__.capitalizedValue = this.getCapitalizedMethod(
                  defaultValue);
              }
              this.formConfig.fields[index].__config__.defaultValue = defaultValue;
              this.formData[ele.__vModel__] = defaultValue;
            }
          }
        });
      },
      getValByTabs(childrenObj) {
        let _arr = [];
        if (!childrenObj || !(childrenObj instanceof Object)) return [];
        for (let key in childrenObj) {
          let children = childrenObj[key];
          children.map(item => {
            if (item.__config__.componentName && item.__config__.componentName == 'avue-tabs') {
              let cObj = item.__config__.childrenObj || {};
              _arr.push(...this.getValByTabs(item.__config__.childrenObj));
            }
            else {
              let _obj = {};
              _obj.formId = item.__config__.formId;
              _obj.defaultValue = this.formData[item.__vModel__];
              _arr.push(_obj);
            }
          });
        }
        return (() => {
          return _arr;
        })()
      },
      calcDefaultValueByTabs(childrenObj, valueForFormIdMap) {
        if (!childrenObj || !(childrenObj instanceof Object)) return;
        for (let key in childrenObj) {
          let children = childrenObj[key];
          children.map(item => {
            if (item.__config__.componentName && item.__config__.componentName == 'avue-tabs') {
              let cObj = item.__config__.childrenObj || {};
              this.calcDefaultValueByTabs(cObj, valueForFormIdMap);
            }
            else {
              let defaultValue = 0;
              if (item.computationalConfiguration && item.computationalConfiguration.length > 0) {
                let formulaStr = "";
                item.computationalConfiguration.forEach((c) => {
                  if (item.type == "taxRate") {
                    //税率
                    if (item.taxRate >= 0) {
                      formulaStr += item.taxRate * 0.01;
                    }
                  }
                  else {
                    let eleValue = valueForFormIdMap.get(c.formId) || 0;
                    formulaStr += c.formId == 0 ? c.name : eleValue;
                  }
                });
                defaultValue = eval(formulaStr);
                defaultValue = this.getNumberFixed2(defaultValue);
                item.__config__.defaultValue = defaultValue;
                this.formData[item.__vModel__] = defaultValue;
              }
            }
          });
        }
      },
      
      async getPaymentCompany_idOptions() {
        // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
        try {
          let resp = await this.$axios({
            method: 'get',
            url:  baseUrl + '/data-items/zm-payment-company/detail',
          });
          if (resp.data.data) {
            this.paymentCompany_typeOptions = resp.data.data;
          }
        }
        catch (error) {}
      },
      async getApplyRange_idOptions() {
        // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
        try {
          let resp = await this.$axios({
            method: 'get',
            url:  baseUrl + '/data-items/code-apply-range/detail',
          });
          if (resp.data.data) {
            this.applyRange_typeOptions = resp.data.data;
          }
        }
        catch (error) {}
      },
      async getDept_idOptions() {
        // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
        try {
          let resp = await this.$axios({
            method: 'get',
            url:  baseUrl + '/companies/departments/tree',
          });
          if (resp.data) {
            let {
              data
            } = resp.data
            this.dept_idOptions = this.formatTree(data, 'F_DepartmentId', 'F_FullName', 'children', 1);
          }
        }
        catch (error) {}
      },
      async getExpense_typeOptions() {
        // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
        try {
          let resp = await this.$axios({
            method: 'get',
            url:  baseUrl + '/data-items/rcbxlx/detail',
          });
          if (resp.data.data) {
            this.expense_typeOptions = resp.data.data;
          }
        }
        catch (error) {}
      },
      async getExpense_carNumberData() {
        // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
        try {
          let resp = await this.$axios({
            method: 'get',
            url:  baseUrl + '/data-items/car-number-choice/detail',
          });
          if (resp.data.data) {
            this.carNumberData = resp.data.data;
          }
        }
        catch (error) {}
      },
      
      //子表单权限
      getAuthorityTableChildrenList(bindTable, children) {
        let column = [];
        if (bindTable && this.formEnCodeList && this.formEnCodeList[bindTable]) {
          let formSubEnCodeList = this.formEnCodeList[bindTable];
          if (children && children.length > 0) {
            column = children.map(ele2 => {
              if (formSubEnCodeList.includes(ele2.prop)) {
                ele2.hide = false;
              }
              else {
                ele2.hide = true;
              }
              if (ele2.hide == false) {
                //工作流中系统表单必填权限
                if (this.formSubTableNotRequiredList[bindTable] != undefined) {
                  if (this.formSubTableNotRequiredList[bindTable].includes(ele2.prop)) {
                    ele2.required = false;
                  }
                  else {
                    ele2.required = true;
                  }
                }
                ele2.rules = [];
                if (ele2.required) {
                  ele2.rules = ele2.ruleList;
                }
                // disabled 属性
                if (this.formSubTableDisabledList[bindTable] != undefined) {
                  if (this.formSubTableDisabledList[bindTable].includes(ele2.prop)) {
                    ele2.disabled = true;
                  }
                  else {
                    ele2.disabled = false;
                  }
                }
              }
              return ele2;
            });
          }
          return column;
        }
        else {
          return children;
        }
      },
      getFormConfig() {
        let config = {
          "fields": [
          //收款人部门id
          {
            "__vModel__": "F_CollectionDeptId",
            "__config__": {
              "label": "收款人部门id",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 112,
              "fieldLength": "100",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_CollectionDeptId",
              "bindTableFieldType": "varchar"
            }
          },
          // 收款人部门名称
          {
            "__vModel__": "F_CollectionDeptName",
            "__config__": {
              "label": "收款人部门名称",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 111,
              "fieldLength": "100",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_CollectionDeptName",
              "bindTableFieldType": "varchar"
            }
          },
          //职级名称
          {
            "__vModel__": "F_Job",
            "__config__": {
              "label": "职级名称",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 101,
              "fieldLength": "100",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_Job",
              "bindTableFieldType": "varchar"
            }
          }, 
          //申请人ID
          {
            "__vModel__": "F_UserId",
            "__config__": {
              "label": "申请人ID",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 102,
              "fieldLength": "50",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_UserId",
              "bindTableFieldType": "varchar"
            }
          },
          //申请人名称
          {
            "__vModel__": "F_UserName",
            "__config__": {
              "label": "申请人名称",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 103,
              "fieldLength": "100",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_UserName",
              "bindTableFieldType": "varchar"
            }
          },
          
          {
            "__vModel__": "F_payment_company",
            "__config__": {
              "label": "支付公司",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 123,
              "fieldLength": "100",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_payment_company",
              "bindTableFieldType": "varchar"
            }
          },
          //申请时间
          {
            "__vModel__": "F_ApplyTime",
            "__config__": {
              "label": "申请时间",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 134,
              "fieldLength": "100",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_ApplyTime",
              "bindTableFieldType": "varchar"
            }
          },
          //部门ID
          {
            "tempType": "tree",
            "__vModel__": "F_Department",
            "__type__": "department",
            "__organize__": true,
            "__config__": {
              "label": "部门ID",
              "showLabel": true,
              "required": true,
              "tag": "avue-input-tree",
              "dataKey": "data",
              "span": 24,
              "bindTableField": "F_Department",
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 127,
              "fieldLength": "50",
              "bindTable": "oa_exp_daily",
              "bindTableFieldType": "varchar"
            }
          }, 
          //部门名称
          {
            "__vModel__": "F_DepartmentName",
            "__config__": {
              "label": "部门名称",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 121,
              "fieldLength": "100",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_DepartmentName",
              "bindTableFieldType": "varchar"
            }
          }, 
          //角色ID
          {
            "__vModel__": "F_RoleId",
            "__config__": {
              "label": "角色ID",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 135,
              "fieldLength": "100",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_RoleId",
              "bindTableFieldType": "varchar"
            }
          },
          //角色名称
          {
            "__vModel__": "F_RoleName",
            "__config__": {
              "label": "角色名称",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 110,
              "fieldLength": "100",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_RoleName",
              "bindTableFieldType": "varchar"
            }
          }, 
          //报销类型
          {
            "__vModel__": "F_ExpenseType",
            "__config__": {
              "label": "报销类型",
              "showLabel": true,
              "tag": "el-select",
              "avueType": "select",
              "span": 24,
              "required": true,
              "saveField": "",
              "showField": "",
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 111,
              "dataType": "dataItem",
              "dataItem": "rcbxlx",
              "fieldLength": "50",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_ExpenseType",
              "bindTableFieldType": "varchar"
            }
          }, 
          //报销金额
          {
            "tempType": "number",
            "__vModel__": "F_ExpenseAmount",
            "computationalConfiguration": [],
            "prepend": "¥",
            "__config__": {
              "label": "报销金额",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input",
              "defaultValue": "",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 136,
              "fieldLength": "50",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_ExpenseAmount",
              "bindTableFieldType": "double"
            }
          }, 
          //报销事由
          {
            "__vModel__": "F_ExpenseReason",
            "__config__": {
              "label": "报销事由",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 145,
              "fieldLength": "100",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_ExpenseReason",
              "bindTableFieldType": "varchar"
            }
          },
          //报销发生时间
          {
            "tempType": "date",
            "__vModel__": "F_ExpenseTime",
            "__config__": {
              "label": "报销发生时间",
              "tag": "el-date-picker",
              "avueType": "datetime",
              "defaultValue": null,
              "showLabel": true,
              "span": 24,
              "required": true,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 113,
              "fieldLength": "0",
              "bindTableFieldType": "datetime",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_ExpenseTime"
            }
          }, 
          //地区
          {
            "__vModel__": "F_Area",
            "__config__": {
              "label": "地区",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 138,
              "fieldLength": "255",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_Area",
              "bindTableFieldType": "varchar"
            }
          }, 
          //发票票号
          {
            "__vModel__": "F_InvoiceNumber",
            "__config__": {
              "label": "发票票号",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 115,
              "fieldLength": 500,
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_InvoiceNumber",
              "bindTableFieldType": "varchar"
            }
          }, 
          //收款人ID
          {
            "__vModel__": "F_CollectionUserId",
            "__type__": "user",
            "__organize__": true,
            "suffix-icon": "el-icon-setting",
            "__config__": {
              "label": "收款人ID",
              "showLabel": true,
              "tag": "xjr-select-user",
              "saveValue": "",
              "required": false,
              "span": 24,
              "bindTableField": "F_CollectionUserId",
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 120,
              "fieldLength": "50",
              "bindTable": "oa_exp_daily",
              "bindTableFieldType": "varchar"
            }
          }, 
          //收款人姓名
          {
            "__vModel__": "F_CollectionUserName",
            "__config__": {
              "label": "收款人姓名",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 123,
              "fieldLength": "50",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_CollectionUserName",
              "bindTableFieldType": "varchar"
            }
          }, 
          //意见簿
          {
            "tempType": "textarea",
            "__vModel__": "field126a83f",
            "__type__": "opinion",
            "__config__": {
              "label": "意见簿",
              "showLabel": true,
              "tag": "xjr-opinion-comonent",
              "defaultValue": null,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 126
            }
          }, 
          //是否生效
          {
            "__vModel__": "F_IsEffective",
            "__config__": {
              "label": "是否生效",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": false,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 124,
              "fieldLength": "4",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_IsEffective",
              "bindTableFieldType": "varchar"
            }
          }, 
          //联系人ID
          {
            "__vModel__": "F_ContactUserId",
            "__type__": "user",
            "__organize__": true,
            "suffix-icon": "el-icon-setting",
            "__config__": {
              "label": "联系人ID",
              "showLabel": true,
              "tag": "xjr-select-user",
              "saveValue": "",
              "required": false,
              "span": 24,
              "bindTableField": "F_ContactUserId",
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 128,
              "fieldLength": "50",
              "bindTable": "oa_exp_daily",
              "bindTableFieldType": "varchar"
            }
          }, 
          //联系人
          {
            "__vModel__": "F_ContactUserName",
            "__config__": {
              "label": "联系人",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "input-tip",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 129,
              "fieldLength": "50",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_ContactUserName",
              "bindTableFieldType": "varchar"
            }
          }, 
          //关联审批单
          {
            "__vModel__": "F_ContractTravelProcessId",
            "__config__": {
              "label": "关联审批单",
              "showLabel": true,
              "tag": "el-select",
              "avueType": "select",
              "span": 24,
              "required": true,
              "saveField": "",
              "showField": "",
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 137,
              "fieldLength": "50",
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_ContractTravelProcessId",
              "bindTableFieldType": "varchar"
            }
          }, 
          //费用说明
          {
            "tempType": "textarea",
            "__vModel__": "F_Remark",
            "__config__": {
              "label": "费用说明",
              "showLabel": true,
              "tag": "el-input",
              "avueType": "textarea",
              "required": true,
              "span": 24,
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 131,
              "fieldLength": 2000,
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_Remark",
              "bindTableFieldType": "varchar"
            }
          }, 
          //上传附件
          {
            "__vModel__": "F_Attachment",
            "__config__": {
              "label": "上传附件",
              "tag": "el-upload",
              "avueType": "upload",
              "defaultValue": null,
              "showLabel": true,
              "required": true,
              "span": 24,
              "showTip": true,
              "buttonText": "点击上传",
              "fileSize": 4,
              "sizeUnit": "MB",
              "F_LgMarkCode": "",
              "prestrainField": "",
              "formId": 132,
              "fieldLength": 2000,
              "bindTable": "oa_exp_daily",
              "bindTableField": "F_Attachment",
              "bindTableFieldType": "varchar"
            }
          }
          ]
        };
        return config;
      },
      Handleselect(){
        if(this.departmentData && this.departmentData.length > 0){
          this.departmentData.forEach(e => {
            if(e.F_DepartmentId == this.formData['F_Department']){
              this.formData['F_DepartmentName'] = e.F_ShortName
            }
          })
        }
      },
      Handleselect1(){
        if(this.department && this.department.length > 0){
          this.department.forEach(e => {
            if(e.F_DepartmentId == this.formData['F_CollectionDeptId']){
              this.formData['F_CollectionDeptName'] = e.F_ShortName
            }
          })
        }
      },
      cancleForm(){
        this.selectUserVisible = false
      },
      selectUser(v){
        this.v = v
        this.selectUserVisible = true
        if(this.departmentData && this.departmentData.length > 0){
          this.departmentData.forEach(e=>{
            e.F_Ischecked = false
          })
           this.departmentData[0].F_Ischecked = true
        }
        this.departmentData = [...this.departmentData]
        //根据用户部门id获取部门所有员工信息
        getCUrrentDepartmentUserList(this.departmentData[0].F_DepartmentId).then(res => {
          if(res.data.success){
           this.userListData = res.data.data
          }
        })
      },
      selectUsers(item){
        this.filterData = []
        this.filterData.push(item)
      },
      removeItem(item){
        this.filterData = []
      },
      selectDepartment(item){
        this.departmentData.forEach(e =>{
          e.F_Ischecked = false
        })
        item.F_Ischecked = true
        getCUrrentDepartmentUserList(item.F_DepartmentId).then(res => {
          if(res.data.success){
           this.userListData = res.data.data
          }
        })
        this.departmentData = [...this.departmentData]
      },
      sureForm(){
        this.selectUserVisible = false
        if(this.v == 1){
          this.formData['F_CollectionUserId'] = this.filterData[0].F_UserId 
          this.formData['F_CollectionUserName'] = this.filterData[0].F_RealName 
          let params = {
            userId:this.formData['F_CollectionUserId']
          }
          //根据收款人的id查询收款人的姓名
          getUserDetailsById(params).then(res => {
            if(res.data.success){
              this.department = res.data.data.F_Department
            }
          })
        }else{
          this.formData['F_ContactUserId'] = this.filterData[0].F_UserId 
          this.formData['F_ContactUserName'] = this.filterData[0].F_RealName 
        }
      },
      selectPeople(v){
        this.values = v
        this.selectNymberVisible = true
        this.$nextTick(()=>{
          this.$refs.selectpeople.init()
        })
      },
      delInvoice(index){
        this.formData.invoiceDetails.splice(index,1)
      }
    }
}
</script>
<style>
.el-table__empty-block {
  width: 100% !important;
}

.avue-form__row {
  padding: 0 !important;
}

#editorphone {
  width: 375px;
  margin: 0 auto;
  border: 1px solid #E4E7ED;
  padding: 0 7.5px;
  background: #f5f6fa;
  height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 5px;
}

#editorphone .el-col {
  border-bottom: 1px solid #F2F2F2;
  background: #fff;
  margin-bottom: 0;
  padding: 0 15px 6px !important;
  width: 100%;
}

#editorphone .el-form-item__label {
  line-height: 20px
}

#editorphone .el-input-group .el-input__inner {
  background: #f5f6fa
}

#editorphone .el-input__inner {
  border: 0
}

#editorphone .el-input-group__append,
#editorphone .el-input-group__prepend {
  border: 0;
  background: #edeef2;
  color: #666;
}

#editorphone .el-input-group .el-input__prefix {
  left: 44px
}

#editorphone .el-input-group .el-input__suffix {
  right: 44px
}

#editorphone .el-form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: wrap;
}

#editorphone .el-form-item__label {
  float: none;
  min-width: 85px;
  width: auto !important;
  text-align: left;
  flex: auto;
}

#editorphone .tinymce .el-form-item__label {
  min-width: 100%;
}

#editorphone .el-form-item__content {
  margin-left: 0px !important;
  flex: auto;
  width: calc(100% - 95px);
}

#editorphone .avueFormNoLable .el-form-item__label,
#editorphone .avueFormNoLable .avue-crud__pagination {
  display: none;
}

#editorphone .avueFormNoLable .el-collapse-item__wrap,
#editorphone .avueFormNoLable .el-collapse {
  border-bottom: 0
}

#editorphone .avueFormNoLable .el-col {
  border-bottom: 0;
  padding-bottom: 0
}

#editorphone .el-form-item__content .el-button:first-child {
  margin-left: 90px;
}

.el-upload__tip {
  line-height: 1.2;
}


.select_user_footer{
  width: 100%;
  height: 50px;
  text-align: right;
}
.el_button_sure{
  margin-top: 5px;
  margin-right: 5px;
}
.select_user_body{
  width: 100%;
  height: 350px;
  border: 1px solid #eee;
  margin: 12px 0;
  display: flex;
  flex-direction: row;
}
.select_user_body_left{
  width: 30%;
  height: 100%;
  border: 1px solid #eee;
}
.select_user_body_left_item{
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  text-indent: 12px;
  border-radius: 4px;
}
.select_user_body_left_item:hover{
  background: #0063f5;
  color: #fff;
  border-radius: 4px;
}
.select_user_body_left_item1{
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  text-indent: 12px;
  border-radius: 4px;
  background: #0063f5;
  color: #fff;
}
.companyInfo{
  font-size: 18px;
  height: 50px;
  border-bottom: 1px solid #eee;
  font-weight: 400;
  color: #000;
  text-indent: 12px;
  line-height: 50px;
  
}
.select_user_body_right{
  width: 70%;
  height: 100%;
  border: 1px solid #eee;
}
.select_user_body_right_top{
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: row;
}
.select_user_body_right_top_left{
  width: 100px;
  line-height: 50px;
  font-size: 18px;
  color: #000;
  text-align: center;
}
.select_user_body_right_top_right{
  width: 300px;
  line-height: 50px;
  font-size: 18px;
  color: #000;
  text-align: left; 

}
.select_user_body_right_top_right_item{
  width: 100px;
  height: 32px;
  margin-top: 8px;
  border: 1px solid #0063f5;
  background: #0063f5;
  color: #fff;
  border-radius: 8px;
  line-height: 32px;
  text-indent: 12px;
  display: flex;
  flex-direction: row;
}
.select_user_body_right_bottom{
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.select_user_body_right_bottom_item{
  /* width: 70px; */
  height: 32px;
  border-radius: 4px;
  border: 1px solid #0063f5;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #0063f5;
  margin-left: 16px;
  margin-top: 16px;
  overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select_user_body_right_bottom_item:hover{
  /* width: 70px; */
  height: 32px;
  border-radius: 8px;
  border: 1px solid #fff;
  line-height: 32px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  margin-left: 16px;
  margin-top: 16px;
  background: #0063f5;
  cursor: pointer;

}
.clodesssd1{
  /* width: 70px; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clodesssd{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: red;
  background: #fff;
  line-height: 24px;
  font-size: 16px;
  text-align: center;
  text-indent: 0;
}
.clodesssd:hover{
  cursor: pointer;
}

</style>
<style scoped>
::v-deep .el-dialog__footer{
  border-top: 1px solid #eee;
}
::v-deep .el-dialog__footer > .dialog-footer > .el-button{
  margin-top: 20px;
}
.upload-demo{
  width: 400px;
}
.table-header-items{
  border: 1px solid #DCDFE6;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.width100{
  width: 100px;
}
.width200{
  width: 13%;
}
.required{
  color:#FE6350;
  position: relative;
  top: 3px;
  right: 3px;
}
.el-inputs_{
  text-align: center;
}
.marginleft{
  margin-left: -100px;
}
.left1{
  width: 50%;
  height: 100%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.right1{
  width: 50%;
  height: 100%;
  text-align: center;
}
.right1 > img{
  width: 100%;
  width: 42.5px;
  height: 37px;
}
.flex_1{
  display: flex;
  flex-direction: row;
}
.textaligncenter{
  text-align: center;
}
.no-needs{
  color: #FE6350;
}
.needs{
  color: #10A300;
  
}
.border{
  border:1px solid red;
}
.table-box{
  width: 1600px;
}
</style>